<template>
    <div class="content">
        <el-dialog title="拒审原因" :visible.sync="dialog.dialogFormVisible1" size="tiny" :before-close="handleClose1">
            <el-form label-width="65px" class="demo-ruleForm formstyle" :rules="rules1" :model="ruleForm1" ref="ruleForm1">
                <el-row>
                    <div class="fontStyle"> * 此操作不可逆，还请谨慎操作。</div>
                    <el-col :span="21">
                        <el-form-item label="" prop="reasonContent">
                            <el-input style="width:100%;" type="textarea" :autosize="{ minRows: 6, maxRows: 12}" v-model="ruleForm1.reasonContent" placeholder="请输入打款失败的原因，不超过30个汉字" :maxlength="30" resize="none"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm1('ruleForm1')">关 闭</el-button>
                <el-button type="primary"  @click="submitForm1('ruleForm1')" :loading="loadingBtn">提 交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="失败原因" :visible.sync="dialog.dialogFormVisible2" size="tiny" :before-close="handleClose2">
            <el-form label-width="65px" class="demo-ruleForm formstyle" :rules="rules2" :model="ruleForm2" ref="ruleForm2">
                <el-row>
                    <div class="fontStyle"> * 此操作不可逆，还请谨慎操作。</div>
                    <el-col :span="21">
                        <el-form-item label="" prop="reasonContent">
                            <el-input style="width:100%;" type="textarea" :autosize="{ minRows: 6, maxRows: 12}" v-model="ruleForm2.reasonContent" placeholder="请输入打款失败的原因，不超过30个汉字" :maxlength="30" resize="none"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm2('ruleForm2')">关 闭</el-button>
                <el-button type="primary"  @click="submitForm2('ruleForm2')" :loading="loadingBtn">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { updateSettlementInfo } from 'api/settleManagement';
export default {
    props: {
        dialog: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            ruleForm1: {
                reasonContent: '',
                leaderName: '',               
                phoneNumber: ''
            },
            ruleForm2: {
                reasonContent: '',
                leaderName: '',               
                phoneNumber: ''
            },
            loadingBtn: false,
            rules1: {
                reasonContent: [
                    { required: true, message: '请输入拒审原因', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'},
                    { max: 30, min: 1, message: '字数请控制在30个以内' }
                ]
            },
            rules2: {
                reasonContent: [
                    { required: true, message: '请输入打款失败的原因', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'},
                    { max: 30, min: 1, message: '字数请控制在30个以内' }
                ]
            }
           
        };
    },
    methods: {
        // 提交
        submitForm1(formName) {
            console.log(this.dialog);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loadingBtn = true;
                    updateSettlementInfo(this.dialog.cashId, this.dialog.pid, this.dialog.orgId, 2, this.ruleForm1.reasonContent).then(response => {
                        this.loadingBtn=false;
                        this.$message({
                            type: 'success',
                            message: response.data.errorMsg
                        })
                        this.$refs.ruleForm1.resetFields();// 清空数据
                        this.$emit('addSuccess', response.data.errorMsg);
                        
                    }).catch(() => {
                        this.loadingBtn=false;
                    });
                }
            });
        },
        submitForm2(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loadingBtn = true;
                    updateSettlementInfo(this.dialog.cashId, this.dialog.pid, this.dialog.orgId, 2, this.ruleForm2.reasonContent).then(response => {
                        this.loadingBtn=false;
                        this.$message({
                            type: 'success',
                            message: response.data.errorMsg
                        })
                        this.$refs.ruleForm2.resetFields();// 清空数据
                        this.$emit('reviseSuccess', response.data.errorMsg);
                        
                    }).catch(() => {
                        this.loadingBtn=false;
                    });
                }
            });
        },
        loadingButton() {
            this.loadingBtn = false
        },
        // 取消
        resetForm1(formName) {
            this.$refs[formName].resetFields();
            this.dialog.dialogFormVisible1 = false
        },
        handleClose1() {
            this.$refs.ruleForm1.resetFields();
            this.dialog.dialogFormVisible1 = false
        },

        resetForm2(formName) {
            this.$refs[formName].resetFields();
            this.dialog.dialogFormVisible2 = false
        },
        handleClose2() {
            this.$refs.ruleForm2.resetFields();
            this.dialog.dialogFormVisible2 = false
        }
    }
}
</script>

<style lang="scss" scoped>
.region{
    p{
        border-bottom:1px solid #e9e9e9;
    }
}

.btn-group{
    padding-top: 10px;
}

.fontStyle{
    padding-left:65px;
    font-size:14px;
    color:red;
    margin-bottom:10px;
}
.dialog-footer{ text-align:center}

</style>
